<template>
  <div>
    <div class="interface-header text-center text-shadow">
      {{ INTERFACE.apiName }}
      <el-tag v-if="INTERFACE.apiStatus == '1'" type="success" size="mini" class="api-status">正常</el-tag>
      <el-tag v-else-if="INTERFACE.apiStatus == '2'" type="warning" size="mini" class="api-status">维护</el-tag>
      <el-tag v-else-if="INTERFACE.apiStatus == '3'" type="danger" size="mini" class="api-status">停用</el-tag>
    </div>
    <div class="container">
      <el-row>
        <el-col :span="24">
          <el-page-header class="mg-t-20" @back="goLink('/interface')" content="接口详情"></el-page-header>
        </el-col>
        <el-col :span="24">
          <el-card class="mg-t-20">
            <div slot="header">
              <span>接口介绍</span>
            </div>
            <div class="interface-info fs-14 text-line-height" v-html="INTERFACE.apiIntroduce"></div>
          </el-card>
        </el-col>
        <el-col :span="24">
          <el-card class="mg-t-20">
            <div slot="header">
              <span>接口信息</span>
            </div>
            <div class="interface-info fs-14">
              <div>
                请求地址： <el-link type="primary">{{ INTERFACE.apiUrl }}</el-link>
              </div>
              <div>
                返回格式：
                <ApiResponseType :value="INTERFACE.apiResponseType"></ApiResponseType>
              </div>
              <div>
                请求方式：
                <ApiRequestType :value="INTERFACE.apiRequestType"></ApiRequestType>
              </div>
              <div>
                请求示例：
                {{ INTERFACE.apiUrlExample }}
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="24">
          <el-card class="mg-t-20">
            <div slot="header">
              <span>请求参数</span>
            </div>
            <div>
              <el-table
                :data="INTERFACE.apiRequestKeyList"
                style="width: 100%">
                <el-table-column
                  label="名称"
                  prop="requestName">
                </el-table-column>
                <el-table-column
                  label="必填"
                  prop="requestRequired">
                  <template slot-scope="scope">
                    <el-tag size="mini" type="success" v-if="scope.row.requestRequired == 'Y'">是</el-tag>
                    <el-tag size="mini" type="danger" v-if="scope.row.requestRequired == 'N'">否</el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  label="类型"
                  prop="requestType">
                  <template slot-scope="scope">
                    <ApiDataType :value="scope.row.requestType"></ApiDataType>
                  </template>
                </el-table-column>
                <el-table-column
                  label="说明"
                  prop="requestText">
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-col>
        <el-col :span="24">
          <el-card class="mg-t-20">
            <div slot="header">
              <span>返回参数</span>
            </div>
            <div>
              <el-table
                :data="INTERFACE.apiResponseKeyList"
                style="width: 100%">
                <el-table-column
                  label="	名称"
                  prop="responseName">
                </el-table-column>
                <el-table-column
                  label="类型"
                  prop="responseType">
                  <template slot-scope="scope">
                    <ApiDataType :value="scope.row.responseType"></ApiDataType>
                  </template>
                </el-table-column>
                <el-table-column
                  label="说明"
                  prop="responseText">
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-col>
        <el-col :span="24">
          <el-card class="mg-t-20">
            <div slot="header">
              <span>返回示例</span>
            </div>
            <div class="code fs-14 border-radius" v-html="INTERFACE.apiResponseExample"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  layout: 'navigation',
  computed: {
    ...mapState({
      nav_config: state => state.config
    })
  },
  //SEO优化
  head(){
    return{
      title: "API接口" + this.nav_config.separate + this.INTERFACE.apiName + this.nav_config.separate + this.nav_config.name,
      meta: [
        { name: 'keywords', content: this.nav_config.keywords + "," + this.INTERFACE.apiName },
        { hid: 'description', name: 'description', content: "为您提供在线免费的API接口" },
      ]
    }
  },
  data(){
    return{
      requestData: [
        {
          name: 'key',
          required: '是',
          type: 'string',
          notes: '用户key'
        },
      ],
      responseData: [
        {
          name: 'key',
          required: '是',
          notes: '用户key'
        },
      ]
    }
  },
  async asyncData(e) {
    let apiInfo = null;
    if(e.params.id){
      await e.app.$api_interface.getInfo(e.params.id).then(res => {
        if(res.code === 200){
          apiInfo = res.data;
        }
      })
    }
    return {INTERFACE: apiInfo};
  },
  validate({ params }) {
    if(params.id === undefined){
      return true;
    }
    // 必须是number类型
    return /^\d+$/.test(params.id)
  },
  methods: {
    goLink(url){
      this.$router.push(url);
    }
  }
}
</script>

<style scoped>
.interface-header{
  background: url('@/static/image/interface-bg.svg') no-repeat;
  background-size: cover;
  height: 200px;
  line-height: 200px;
  font-size: 30px;
  color: #FFFFFF;
}
.interface-info>div{
  margin-top: 8px;
}
.api-status{
  position: relative;
  top: -3px;
}
.code{
  background: #282c34;
  color: #abb2bf;
  padding: 10px;
  line-height: 16px;
}
</style>
